<template>
  <div class="proportal">
    <el-header>
      <div class="head-left">
        <a href="#/proportal/index">
          <img
            src="@/assets/images/logo.png"
            alt="logo"
            width="28"
            height="28"
          />
        </a>
        <div class="top-menus">
          <div
            :class="['menu', activeMenu === item.menu_id ? 'active' : '']"
            v-for="item in navMenu.slice(0, 3)"
            :key="item.menu_id"
            @click="navClick(item)"
          >
            <img src="@/assets/images/menu_left.svg" alt="" />
            <span>{{ item.menu_name[locale] }}</span>
            <img src="@/assets/images/menu_right.svg" alt="" />
          </div>
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
            popper-class="porportal-popover"
          >
            <div class="otherMenu">
              <div
                :class="[
                  'last-menu',
                  activeMenu === item.menu_id ? 'active' : '',
                ]"
                v-for="item in navMenu.slice(3)"
                :key="item.menu_id"
                @click="navClick(item)"
              >
                {{ item.menu_name[locale] }}
              </div>
            </div>
            <i
              v-show="navMenu.length > 3"
              class="el-icon-more"
              slot="reference"
            ></i>
          </el-popover>
        </div>
      </div>
      <div class="head-right">
        <el-tooltip
          content="管控台"
          placement="bottom-start"
          effect="light"
          :offset="-20"
          popper-class="proportal-tooltip"
        >
          <i
            @click="toSystemtools"
            class="iconfont icon-hezuohuobanmiyueguanli"
            v-if="ifAdmin"
          ></i>
        </el-tooltip>
        <div class="hoverArea">
          <el-avatar
            :size="30"
            :src="`/local/uploadFiles/${avatarInfo.picture}`"
            v-if="avatarInfo.picture"
          ></el-avatar>
          <div
            v-else
            :class="['auto-avator', avatarInfo.sex === 0 ? 'girl' : 'boy']"
            slot="reference"
          >
            <span class="name">{{ avatarInfo.employee_name.slice(-2) }}</span>
          </div>
          <span class="nameDept">
            <span class="name">{{ avatarInfo.employee_name }}</span>
            <span
              ><span>行政</span
              >{{
                avatarInfo.department_name ? avatarInfo.department_name : "--"
              }}</span
            >
          </span>
          <i class="el-icon-arrow-down"></i>
          <div id="selfDefine-message-box">
            <div class="topIcon"></div>
            <div class="content" @click="changeLocale('zh')">中文</div>
            <div class="content" @click="changeLocale('en')">English</div>
            <div class="content" @click="toPersonalCenter()">个人中心</div>
            <div class="content logout" @click="logOut">退出登录</div>
          </div>
        </div>
      </div>
    </el-header>
    <el-container>
      <div class="top-bar"></div>
      <portal-index v-if="activeMenu === 'index'" />
      <router-view></router-view>
    </el-container>
  </div>
</template>

<script>
import { getActiveNavMenu, getAllSettingsMap, getLeftMenu } from "@/http/api";
import { AddWaterMark } from "watermarkerjs";
import PortalIndex from "@/components/proportal/portalIndex/PortalIndex";
export default {
  name: "proportalTempVue",
  components: { PortalIndex },
  data() {
    return {
      avatarInfo: JSON.parse(localStorage.getItem("userInfo")),
      navMenu: [],
      activeMenu: "",
      ifAdmin: false,
      locale: "zh",
    };
  },
  async mounted() {
    this.locale = JSON.parse(localStorage.getItem("locale"));
    // 获取导航菜单 navMenu
    let res = await getActiveNavMenu();
    if (res.code === 20041) {
      this.navMenu = res.data;
    }
    for (let index = 0; index < this.navMenu.length; index++) {
      if (this.navMenu[index].visit_url.charAt(0) === "/") {
        this.activeMenu = this.navMenu[index].menu_id;
        break;
      }
      if (index === this.navMenu.length - 1) {
        this.activeMenu = "index";
      }
    }
    this.activeMenu = this.navMenu.filter(
      (item) => item.visit_url.split("/")[1] === this.$route.path.split("/")[2]
    )[0]?.menu_id;
    res = await getAllSettingsMap();
    if (res.code === 20041) {
      if (res.data.watermark) {
        const watermask = document.querySelector("#watermask");
        if (watermask) {
          document.body.className = "";
        } else {
          AddWaterMark(JSON.parse(localStorage.getItem("userInfo")));
        }
      } else {
        const watermask = document.querySelector("#watermask");
        if (watermask) {
          document.body.className = "hiddenMask";
        }
      }
    }
    res = await getLeftMenu();
    if (res.code === 20041) {
      if (res.data.menu.length > 1) {
        this.ifAdmin = true;
      }
    }
  },
  methods: {
    navClick(nav) {
      if (nav.visit_url.charAt(0) === "/") {
        this.activeMenu = nav.menu_id;
        this.$router.push("/proportal" + nav.visit_url);
      } else {
        window.open(nav.visit_url, "_blank");
      }
    },
    toSystemtools() {
      window.open(window.location.origin + "/#/systemtools/main", "_blank");
    },
    logOut() {
      localStorage.removeItem("userInfo");
      localStorage.removeItem("cookie");
      const watermask = document.querySelector("#watermask");
      if (watermask) {
        document.body.className = "hiddenMask";
      }
      this.$router.push("/login");
    },
    changeLocale(type) {
      localStorage.setItem("locale", JSON.stringify(type));
      window.location.reload();
    },
    toPersonalCenter() {
      this.activeMenu = "";
      this.$router.push("/proportal/personalCenter");
    },
  },
};
</script>
<style lang="less" scoped>
.proportal {
  .el-header {
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    position: relative;
    z-index: 1;
    .head-left {
      display: flex;
      align-items: center;
      .top-menus {
        margin-left: 50px;
        display: flex;
        transform: translateY(4px);
        align-items: center;
        & > div {
          display: flex;
          cursor: pointer;
          span {
            min-width: 72px;
            text-align: center;
            color: #646a73;
            line-height: 55px;
          }
          img {
            opacity: 0;
          }
          &.active {
            span {
              background-color: #f2f4f7;
              color: #1f2329;
            }
            img {
              opacity: 1;
            }
          }
          &:hover span {
            color: #1f2329;
          }
        }
        .el-icon-more {
          margin-left: 48px;
        }
      }
    }
    i.iconfont.icon-hezuohuobanmiyueguanli {
      font-size: 20px;
      font-weight: 600;
      margin-right: 20px;
      padding-right: 20px;
      line-height: 30px;
      border-right: 1px solid #e8eaed;
      cursor: pointer;
      color: #8f959e;
    }
    .head-right {
      display: flex;
      align-items: center;
      height: 100%;
      .hoverArea {
        display: flex;
        align-items: center;
        cursor: pointer;
        .nameDept {
          display: flex;
          flex-direction: column;
          padding: 0 10px;
          & > span:nth-child(2) {
            font-size: 12px;
            color: #646a73;
            margin-top: 4px;
            span {
              background-color: #ff9801;
              color: #fff;
              padding: 0 4px;
              border-radius: 4px;
              margin-right: 4px;
            }
          }
          .name {
            font-size: 14px;
          }
        }
        &:hover #selfDefine-message-box {
          opacity: 1;
          z-index: 1;
        }
      }
      i {
        font-size: 12px;
        color: #2b2f36;
      }
      #selfDefine-message-box {
        flex: none;
        position: absolute;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        padding: 6px 0;
        right: 30px;
        top: 54px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        width: 150px;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: -1;
        background-color: #fff;
        .topIcon {
          position: absolute;
          top: -4px;
          right: 20%;
          width: 10px;
          height: 10px;
          background-color: #fff;
          border-left: 1px solid #ebeef5;
          border-top: 1px solid #ebeef5;
          transform: rotate(45deg);
        }
        .content {
          padding: 8px 12px 10px 18px;
          font-size: 14px;
          color: #606266;
          cursor: pointer;
          &.logout {
            border-top: 1px solid #e8eaed;
          }
          &:hover {
            background-color: #f5f6f7;
          }
        }
      }
    }
  }
  .el-container {
    min-height: calc(100vh - 60px);
    background: #f2f4f7;
    padding: 14px 36px;
    width: 100%;
    box-sizing: border-box;
    .top-bar {
      background-color: #f2f4f7;
      position: absolute;
      width: 100%;
      height: 14px;
      top: 60px;
      left: 0;
    }
    .main-con {
      width: 100%;
      .dong-tai {
        width: 70%;
        height: 338px;
        background-color: #fff;
        padding: 24px 20px 0 24px;
        .top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .left {
            color: rgb(31, 35, 41);
            font-weight: 500;
            font-size: 18px;
          }
          .right {
            color: rgb(100, 106, 115);
            font-size: 14px;
            cursor: pointer;
          }
        }
        .bottom {
          padding-top: 10px;
          height: 280px;
          display: flex;
          .b-left {
            width: 400px;
            height: 248px;
            margin-right: 20px;
            .lunbo,
            ul,
            li,
            img {
              width: 100%;
              height: 100%;
              overflow: hidden;
            }
          }
          .b-right {
            flex: 1;
            .it {
              width: 100%;
              height: 54px;
              line-height: 54px;
              position: relative;
              font-size: 14px;
              color: rgb(31, 35, 41);
              border-bottom: 1px solid rgb(232, 234, 237);
              display: flex;
              justify-content: space-between;
              img {
                margin-left: 4px;
              }
              .time {
                color: rgb(100, 106, 115);
              }
            }
          }
        }
      }
      .xinwen {
        width: 30%;
      }
    }
  }
}
</style>
<style lang="less">
.porportal-popover {
  padding: 4px 0;
  .last-menu {
    line-height: 20px;
    padding: 10px;
    width: 100%;
    color: #646a73;
    cursor: pointer;
    &:hover,
    &.active {
      color: #1f2329;
      background-color: #f2f4f7;
    }
  }
}
.proportal-tooltip.is-light {
  border: 0;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  .popper__arrow {
    left: 50% !important;
    transform: translateX(-50%);
    &::after {
      width: 10px;
      height: 10px;
      border: 0;
      border-color: #fff;
      background: #fff;
      transform: rotate(45deg);
    }
  }
}
</style>
